<template>
<div class="wrapper">
    <swiper :options="swiperOption">
        <swiper-slide v-for="item of swiperList" :key="item.id">
            <img class="swiper-img" :src="item.imgurl" alt="">
        </swiper-slide>
        <!-- <swiper-slide>I'm Slide 2</swiper-slide> -->
        <div class="swiper-pagination"  slot="pagination"></div>
     </swiper>
</div>

</template>

<script>
export default {
    name:'HomeSwiper',
    data() {
        return {
            swiperOption:{
                pagination:'.swiper-pagination',
                loop:true
            },
            swiperList:[
                {
                id:'0001',
                imgurl:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01a12d556864ad00000127163e8f0e.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655810366&t=94235038cd9c45beed3b87ce5a52362b'},
                {
                id:'0002',
                imgurl:'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E8%BD%AE%E6%92%AD%E5%9B%BE&step_word=&hs=0&pn=5&spn=0&di=7084067677328637953&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&istype=0&ie=utf-8&oe=utf-8&in=&cl=2&lm=-1&st=undefined&cs=3952758036%2C2791292572&os=2208424859%2C3777274101&simid=3952758036%2C2791292572&adpicid=0&lpn=0&ln=1846&fr=&fmq=1653209173153_R&fm=&ic=undefined&s=undefined&hd=undefined&latest=undefined&copyright=undefined&se=&sme=&tab=0&width=undefined&height=undefined&face=undefined&ist=&jit=&cg=&bdtype=0&oriquery=&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01cf5c602ff76e11013ef90f86f855.jpg%402o.jpg%26refer%3Dhttp%3A%2F%2Fimg.zcool.cn%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Dauto%3Fsec%3D1655810366%26t%3D92a19d9fdc6876ed1978372fb5b560b8&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Bzv55s_z%26e3Bv54_z%26e3BvgAzdH3Fo56hAzdH3FZNTAnOTU8MDA%3D_z%26e3Bip4s&gsm=6&rpstart=0&rpnum=0&islist=&querylist=&nojc=undefined&dyTabStr=MCwzLDIsNiw1LDQsMSw3LDgsOQ%3D%3D'
            }]
        }
    },
}
</script>

<style lang='stylus' scoped>
    .wrapper >>> .swiper-pagination-bullet-active
        background-color: #fff

    .wrapper
        overflow:hidden
        width: 100%
        height: 0
        padding-bottom: 31.25%
        background: #eee

        .swiper-img
            width: 100px

</style>